<template>
  <div>
    <router-link to="/login">
      <van-nav-bar
        left-arrow
        fixed
        title="注册"
        right-text="登录"
        class="navreg"
      ></van-nav-bar>
    </router-link>
    <img
      src="http://www.zlllcy.com/fuben/f7.png"
      alt=""
      class="topimg"
    />

    <van-cell-group>
      <van-field
        v-model="phone"
        :border="true"
        required
        label="手机号"
        placeholder="请输入您的手机号"
      />
      <van-field
        v-model="sms"
        center
        required
        clearable
        :border="false"
        label="验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button
            @click="gainCode"
            :disabled="disabled"
            size="small"
            type="warning"
            class="validation"
            >{{ time }}</van-button
          >
        </template>
      </van-field>
      <div class="pwd">
        <van-field
          v-if="isShow"
          v-model="pwd"
          required
          type="password"
          @blur.native.capture="checkPwd"
          :state="pwdState"
          label="密码"
          placeholder="请输入6到15位数字"
        />
        <van-field
          v-else
          v-model="pwd"
          required
          @blur.native.capture="checkPwd"
          :state="pwdState"
          label="密码"
          placeholder="请输入6到15位数字"
        />
        <van-icon
          v-if="isReg"
          class="eye"
          name="closed-eye"
          @click="eye"
          size="1.5rem"
        />
        <van-icon v-else class="eye" name="eye-o" @click="eye" size="1.5rem" />
      </div>
    </van-cell-group>
    <van-button
      type="primary"
      :disabled="checked == false"
      @click="checkForm"
      size="large"
      class="btnreg"
      >注册</van-button
    >
    <van-checkbox
      v-model="checked"
      icon-size="16px"
      shape="square"
      class="checkbox"
    >
      <span class="agree">同意 <a href="javascript:;">《隐私权政策》</a></span>
    </van-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClick: true,
      phone: "",
      time: "发送验证码",
      sms: "", //用于验证码做双向数据绑定
      pwd: "", //用于密码框做双向数据绑定
      pwdState: "",
      checked: false,
      isShow: true, //默认显示密码框
      isReg: true, //默认显示闭眼
      disabled: false,
      code: "", //用于保存后端传过来的验证码
    };
  },
  methods: {
    //点击眼睛切换显示或隐藏密码
    eye() {
      this.isReg = !this.isReg;
      if (this.isReg == true) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    checkPwd() {
      //验证密码是否符合要求
      let reg = /^\w{6,15}$/; //6到15位数字
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },
    // 获取验证码
    gainCode() {
      //正则表达式验证手机号
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg.test(this.phone)) {
        let s = 60;
        // this.time = s + 's'
        let interval = setInterval(() => {
          s--;
          this.time = s + "s";
          this.disabled = true;
          if (s < 0) {
            this.time = "重新获取";
            this.isClick = true;
            clearInterval(interval);
            this.disabled = false;
          }
        }, 1000);
      } else {
        this.$toast("输入正确的手机号");
        return;
      }
      // 发送获取验证码请求
      this.axios.post("/user/sms", `phone=${this.phone}`).then((result) => {
        // console.log(result.data);//返回验证码
        this.code = result.data; //保存后端返回的验证码
      });
    },
    //注册表单验证
    checkForm() {
      // 判断手机号是否为空
      if (this.phone == "") {
        this.$toast("手机号不能为空！");
        return;
      }

      //判断用户输入的验证码跟获取到的验证码是否一致或者是否为空
      if (this.sms != this.code || this.sms == "") {
        this.$toast("验证码为空或输入不正确！");
        return;
      }
      //判断密码是否为空
      if (this.pwd == "") {
        this.$toast("密码不能为空！");
        return;
      }

      //console.log('注册成功！');
      // 发送post请求，传递参数：phone upwd sms
      //  console.log(this.phone,this.pwd,this.sms);
      this.axios
        .post(
          "/user/register",
          `phone=${this.phone}&upwd=${this.pwd}&sms=${this.sms}`
        )
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            //注册成功
            this.$toast("注册成功");
            this.$router.push("/login");
          } else if (res.data.code == 201) {
            //用户已存在
            this.$toast("注册失败，用户已存在");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/scss/public.scss";

// 背景图
.topimg {
  margin-top: 50px;
}

// 验证码框
.validation {
  // background:rgba(0, 0,0, 0.1);
  background-color: #a0ccff;
  border-radius: 8px;
  border: none;
  color: #fff;
}

.van-nav-bar__title {
  color: $colorFontWhite !important;
}

img {
  width: 100%;
}
.navreg {
  color: $colorFontWhite !important;
}
.van-nav-bar {
  background-color: $colorTp !important;
}

.pwd {
  display: flex;
}
.eye {
  margin-right: 1rem !important;
  font-size: 16px !important;
  margin-top: 16px;
}
// 发送验证码样式
.van-field__button {
  font-size: 10px !important;
  width: 3.8rem !important;
}

.van-button--large {
  width: 80% !important;
  height: 35px !important;
  border-radius: 5px !important;
  color: $colorFontWhite !important;
}
// 复选框样式
.van-checkbox__icon {
  margin-bottom: 1rem;
  font-size: $fontSize14 !important;
}
// "同意"样式
.van-checkbox__label {
  font-size: 12px;
  margin-bottom: 0.2rem !important;
}
.checkbox {
  margin-top: 6%;
  margin-left: 30%;
  border-radius: 0.3125rem;
  // background-color: skyblue;
}
.btnreg {
  margin: 0 auto !important;
  display: block !important;
  margin-top: 0.6rem !important;
  background-color: #4198ff;
  border: none;
}
.agree {
  font-size: 12px;
}
a {
  color: $colorFontOrg;
  font-size: 12px;
}
</style>